<template>
<!-- 注册页 -->
  <div class="body">
      <div class="neir">
          <h2 class="wercome">欢迎注册</h2>
          <img class="dog" src="../../assets//images/login/cat.gif" alt="一只小狗">
          <div class="registertext">
              <div class="input">
                  <el-input @input="handlerusername" v-model="username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid" clearable></el-input>
                  <p class="NullUser" v-show="userNull">用户名不能为空！</p>
                  <el-input @input="handlerpassword" v-model="password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
                  <p class="NullUser" v-show="passwordNull">密码不能为空！</p>
                  <el-input @input="handlerpasswordAgin" v-model="passwordAgin" prefix-icon="el-icon-lock" placeholder="请再次确认密码" show-password></el-input>
                  <p class="NullUser" v-show="passwordAginNull">请再次输入密码！</p>
                  <p class="NullUser" v-show="dontfit">密码不一致，请重新输入！</p>
              </div>
              <div class="Submit">
                <el-button class="submit_scss" type="primary" @click="registerSubmiit">提交</el-button>
                <div class="toLogin"><router-link to="/">已有账号？去登录</router-link></div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data(){
    return{
      username:"",//用户输入的用户名
      password:"",//密码
      passwordAgin:"",//确认密码
      user:{},
      userNull:false,//判断用户名是否为空
      passwordNull:false,//判断密码输入框是否为空
      passwordAginNull:false,//判断确认密码输入框是否为空
      dontfit:false,
    }
  },
  methods:{
    registerSubmiit(){
      if(this.username==""){//用户名输入框为空
        this.userNull = true
      }
      if(this.password==""){//密码输入为空
        this.passwordNull = true
      }
      if(this.passwordAgin==""){//确认密码输入框为空
        this.passwordAginNull = true
      }
      if(this.password !== this.passwordAgin){// 两次密码输入不一致
        this.dontfit = true
      }
      // 将得到的数据传给后端
      // console.log(this.user);
      this.user = {
        username:this.username,
        password:this.password
      }
      if(this.username!=""&&this.password!=""&&this.password == this.passwordAgin){
        axios({
        // 解决post传参跨域的问题
          headers:{ 'Content-Type':'application/x-www-form-urlencoded'},
          method: 'post',
          url: "http://localhost/project/liulang/logon/register.php",
          // 将用户输入的值传递到后端
          data:this.user,
          dataType:"Json"
        }).then(res=>{
          var data = res.data
            console.log(res)
          if(data==0){//返回结果为0，注册失败
            console.log("已有用户注册失败！")
            this.$alert('已存在该用户，注册失败！',{
              confirmButtonText: '确定',
              callback: action => {
              this.username = "";
              this.password = "";
              this.passwordAgin = ""
            }
            })
          }
          else{//注册成功
            // this.$alert('注册成功!',{
            //   confirmButtonText: '确定',
            //   callback: action => {
            //   this.username = "";
            //   this.password = "";
            //   this.passwordAgin = ""
            // }
            // })
            this.$confirm('注册成功，去登录？', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.username = "";
              this.password = "";
              this.passwordAgin = ""
              // 注册成功后点击确定跳转至登录页
              this.$router.push({ path:'/'  })
            }).catch(() => {
              this.username = "";
              this.password = "";
              this.passwordAgin = ""        
            });
          }
        })
      }
      
    },
    handlerusername(e){//监听用户名输入框
    // console.log(e)
      if(e!=""){
        this.userNull = false
      }
    },
    handlerpassword(e){//监听密码输入框
      if(e!=""){
        this.passwordNull = false
      }
    },
    handlerpasswordAgin(e){//监听确认密码输入框
      if(e!=""){
        this.passwordAginNull = false
      }
    }
  }
}
</script>

<style lang="scss">
*,html,body{
    margin: 0;
    padding: 0;
    border: 0;
}
.body{
    text-align: center;
    top: 0;
    position: absolute;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* background: #ccc; */
    /* border: 1px solid #ccc; */
    .neir{
      padding-top: 5px;
      /* background: #ccc; */
      margin: 6vh auto;
      height: 90vh;
      width: 80vw;
      // border: #ccc 1px solid;
      // border-radius: 18px;
      box-shadow: 0 0 3px rgb(53, 53, 53);
      .wercome{
        margin-top: 5vh;
        font-size: 2em;
        color:#16173f
      }
      .dog{
        width: auto;
        /* height: auto; */
        position: relative;
        left: -20%;
        top:31vh ;
      }
      .registertext{
        position: relative;
        top: -27vh;
        left: 33%;
        /* background: #ccc; */
        // border: 1px solid #f00;
        border-radius: 13px;
        box-shadow: 0 0 9px rgb(53, 53, 53);
        width: 30vw;
        height: 50vh;
        padding-top: 6vh;
        .el-input{
          width: 20vw;
          margin-bottom: 2vh;
        }
        .input{
          margin-bottom: 2vh;
          .NullUser{
            margin-top: -1.3vh;
            margin-bottom: 1vh;
            padding-left:5vw ;
            // border: 1px solid #ccc;
            text-align: left;
            font-size: 9px;
            color: #f00;
          }
        }
        .inputyz{
          .el-input{
            width: 8vw;
          }
          .zw{
            // border: 1px solid #ccc;
            display: inline-block;
            width: 11.5vw;
            // height: 8vh;
          }
          .outlook{
            cursor: pointer;
          }
        }
        .yzm{
          border: 1px solid #ccc;
          width: 11.5vw;
          height: 10vh;
          position: absolute;
          top: 33%;
          right:9%;
          cursor: pointer;
        }
        .toLogin{
          // position: absolute;
          // top: 16vh;
          // left: 35%;
        }
        .Submit{
          // border: 1px solid #000;
          .submit_scss{
            width: 85%;
          }
        }
      }
    }
}
</style>